import React, { useCallback, useState } from 'react'
import style from './index.less'
import { Form, SearchBar, } from 'antd-mobile'
import PageList from '../.info/.item'
import TopList from './.list'
import classnames from 'classnames';
import ActionPanel from '@/components/action-panel'
import PriceRangeForm from '@/components/jiagequjian'
import _ from 'lodash'

export default () => {
    const [searchValue, setSearchValue] = useState('');
    const [visible1, setVisible1] = useState<boolean>(false)
    const [params, setParams] = useState<object>({});
    const [active, setActive] = useState<string | null>(null);
    const [form] = Form.useForm();
    const { validateFields } = form

    const handleInputChange = (value: string) => {
        setSearchValue(value)
        setTimeout(() => {
            setParams({commodityName:value})
        }, 500)
    }

    const onOk1 = useCallback(async (data: any) => {
        
        console.log(data);
        setParams(data)
        setActive(null);

    }, [validateFields])

    return (
        <div className={style.page}>
            <Form
                form={form}
                onFinish={onOk1}
                className={style['condition-warp']}
            >
                <div>
                    <Form.Item
                        name="commodityName"
                    >
                        <SearchBar
                        placeholder='搜索'
                        onChange={handleInputChange}
                        value={searchValue}
                        className={style.search}
                    />
                    </Form.Item>
                    
                </div>
                <div className={style['item-top']}>
                    <div className={classnames(style.condition, {
                        [style.active]: null !== active,
                    })}>
                        <div className={style.item}>
                            <ActionPanel
                                excludeClassName={style.item}
                                visible={'1' === active}
                                onClick={() => {
                                    if ('1' === active) {
                                        setActive(null);
                                        setVisible1(true);
                                    } else {
                                        setActive('1');
                                    }
                                }}
                                onReset={() => {
                                    form.resetFields();
                                    onOk1('');
                                }}
                                onOk={onOk1}
                                panel={
                                    <Form.Item name='code' >
                                        <TopList
                                            showSearch={true}
                                        />
                                    </Form.Item>
                                }
                            >
                                分类
                            </ActionPanel>
                        </div>
                        <div className={style.item}>
                            <ActionPanel
                                excludeClassName={style.item}
                                visible={'2' === active}
                                onClick={() => {
                                    if ('2' === active) {
                                        setActive(null);
                                    } else {
                                        setActive('2');
                                    }
                                }}
                                onReset={() => {
                                    onOk1('');
                                }}
                                onOk={onOk1}
                                panel={
                                    <Form.Item name="originPlace">
                                        <TopList />
                                     </Form.Item>
                                }
                            >
                                供应地
                            </ActionPanel>
                        </div>
                        <div className={style.item}>
                            <ActionPanel
                                excludeClassName={style.item}
                                visible={'3' === active}
                                onClick={() => {
                                    if ('3' === active) {
                                        setActive(null);
                                    } else {
                                        setActive('3');
                                    }
                                }}
                                panel={
                                    <div className={style.price}>
                                        <div className={style['price-title']}>价格区间</div>
                                        <PriceRangeForm value={[]}/>

                                    </div>
                                }
                            >
                                价格
                            </ActionPanel>
                        </div>
                        <div className={style.item}>
                            <ActionPanel
                                excludeClassName={style.item}
                                visible={'4' === active}
                                onClick={() => {
                                    if ('4' === active) {
                                        setActive(null);
                                    } else {
                                        setActive('4');
                                    }
                                }}
                                onReset={() => {
                                    onOk1('');
                                }}
                                onOk={onOk1}
                                panel={
                                    <Form.Item name="shipmentPlace">
                                        <TopList />
                                    </Form.Item>
                                }
                            >
                                产地
                            </ActionPanel>
                        </div>
                    </div>
                </div>
            </Form>
            <div className={style.list}>
                <PageList
                    params={{
                        ...params
                    }}
                />
            </div>
        </div>
    )
}
